<template>
  <div class="app-container">
    <section>
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true">
          <el-form-item>
            <el-button type="primary" @click="Add()">新增商品证书</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-table :data="SKUCertificateList" border style="width: 100%">
        <el-table-column prop="CertificateId" label="证书ID" align="center"></el-table-column>
        <el-table-column prop="Description" label="备注" align="center"></el-table-column>
        <el-table-column label="证书" width="250" align="center">
          <template slot-scope="scope">
            <img :src="scope.row.ImageUrl+'?x-oss-process=image/resize,m_lfit,h_250,w_200'" />
          </template>
        </el-table-column>
        <el-table-column prop="Ins" label="上传时间" align="center" :formatter="formatDate"></el-table-column>
        <el-table-column prop="SKUId" label="商品编号" align="center"></el-table-column>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="success" @click="handleDelete(scope.row.CertificateId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--新增界面-->
      <el-dialog title="新增" :visible.sync="addFormVisible">
        <el-form :model="addForm" label-width="150px" ref="addForm">
          <el-form-item label="图片地址">
            <el-input
              type="textarea"
              v-model="addForm.ImagePath"
              auto-complete="off"
              :disabled="true"
            ></el-input>
            <el-upload
              :action="serverUrl"
              :file-list="imageUrls"
              list-type="picture-card"
              :on-success="handleAvatarSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="描述" prop="Description">
            <el-input v-model="addForm.Description" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click.native="addFormVisible = false">取消</el-button>
          <el-button type="primary" @click.native="addSubmit">提交</el-button>
        </div>
      </el-dialog>
      <!-- 删除界面 -->
      <el-dialog title="提示" :visible.sync="deleteFormVisible" width="30%">
        <span>删除后数据无法恢复确定继续吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteSubmit()">删除</el-button>
        </span>
      </el-dialog>
      <el-pagination
        background
        layout=" prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right;margin-top: 10px;"
      ></el-pagination>
    </section>
  </div>
</template>

<script>
import {
  PurchaseSKUCertificateList,
  PurchaseAddSKUCertificate,
  PurchaseDeleteSKUCertificate,
  PurchaseUploadImage
} from "@/api/api";
import Config from "../../api/config";
export default {
  data() {
    return {
      formInline: {},
      addFormVisible: false,
      deleteFormVisible: false,
      addForm: { ImagePath: "" },
      page: 1,
      pageSize: 20,
      total: 0,
      SKUCertificateList: [],
      serverUrl:
        "http://api.mei.qiangtu.com/Master/Purchase/PurchaseUploadImage?SessionId=" +
        JSON.parse(localStorage.getItem("userinfo")).SessionId,
      imageUrl: "",
      imageUrls: []
    };
  },
  created() {
    this.PurchaseSKUCertificateList();
  },
  methods: {
    handleRemove(file, fileList) {
      var urls = "";
      for (var tmp in fileList) {
        urls += "," + fileList[tmp].name;
      }
      this.addForm.ImagePath = urls;
    },
    handlePictureCardPreview(file) {},
    handleAvatarSuccess(res, file) {
      try {
        this.imageUrl = Config.StaticDomain + res.Data;
        this.addForm.ImagePath = this.imageUrl;
      } catch (err) {}
    },
    //获取商品证书列表
    PurchaseSKUCertificateList() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        Page: this.page,
        PageSize: this.pageSize,
        SKUId: this.$route.query.ProductId
      };
      PurchaseSKUCertificateList(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          var vdata = JSON.parse(Base64.decode(res.data.Data));
          console.log("获取商品证书列表", vdata);
          self.SKUCertificateList = vdata.DataList;
          self.total = vdata.TotalCount;
        }
      });
    },
    //新增
    addSubmit: function() {
      var self = this;
      self.addForm.ImagePath = self.imageUrl;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        SKUId: this.$route.query.ProductId,
        ImageUrl: this.addForm.ImagePath,
        Description: this.addForm.Description
      };
      PurchaseAddSKUCertificate(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          self.addFormVisible = false;
          self.PurchaseSKUCertificateList();
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
      });
    },
    //删除
    deleteSubmit: function() {
      var self = this;
      var para = {
        SessionId: JSON.parse(localStorage.getItem("userinfo")).SessionId,
        CertificateId: this.formInline.CertificateId
      };
      PurchaseDeleteSKUCertificate(para).then(res => {
        if (res.data.Status != 1) {
          this.$message({
            message: res.data.Description,
            type: "error"
          });
          return;
        } else {
          self.deleteFormVisible = false;
          self.PurchaseSKUCertificateList();
          this.$message({
            message: res.data.Description,
            type: "success"
          });
        }
      });
    },

    formatDate: function(row) {
      var date = new Date(row.Ins);
      var yy = date.getFullYear();
      if (yy < 1900) yy = yy + 1900;
      var MM = date.getMonth() + 1;
      if (MM < 10) MM = "0" + MM;
      var dd = date.getDate();
      if (dd < 10) dd = "0" + dd;
      var hh = date.getHours();
      if (hh < 10) hh = "0" + hh;
      var mm = date.getMinutes();
      if (mm < 10) mm = "0" + mm;
      var ss = date.getSeconds();
      if (ss < 10) ss = "0" + ss;
      return yy + "年" + MM + "月" + dd + "日" + " " + hh + ":" + mm + ":" + ss;
    },

    //显示新增界面
    Add: function() {
      this.addFormVisible = true;
      this.addForm = {
        ImagePath: ""
      };
    },
    //显示删除弹框
    handleDelete(CertificateId) {
      this.formInline.CertificateId = CertificateId;
      console.log("输出证书Id");
      this.deleteFormVisible = true;
    },

    //翻页
    handleCurrentChange(val) {
      this.page = val;
      this.BranchList();
    }
  }
};
</script>

<style>
</style>